<template>
  <div class="container">
    <nav-bar>
      <van-icon
        name="ellipsis"
        color="#999"
        size="18"
      />
      <template
        v-if="headerInfoVisible"
        #title
      >
        <div class="avatar-mini">
          <img src="http://toutiao.itheima.net/images/user_head.jpg">
        </div>
        <span class="name-mini">{{ articleDetail.aut_name }}</span>
        <span class="follow-mini">关注</span>
      </template>
    </nav-bar>

    <!-- 容器 -->
    <section
      ref="section"
      @scroll="onScroll"
    >
      <!-- 头部部分 -->
      <header ref="header">
        <h2>{{ articleDetail.title }}</h2>
        <div class="time-wrapper">
          <span>{{ getDate(articleDetail.pubdate) }}</span>
          <span>{{ articleDetail.read_count }} 阅读</span>
          <span>{{ articleDetail.comm_count }} 评论</span>
        </div>
        <div class="author-info">
          <div class="avatar">
            <img src="http://toutiao.itheima.net/images/user_head.jpg">
          </div>
          <div class="name">{{ articleDetail.aut_name }}</div>
          <van-button
            class="follow"
            color="#fc662c"
            size="small"
            round
          >
            + 关注
          </van-button>
        </div>
      </header>

      <main>
        <div v-html="articleDetail.content" />
        <p class="pub-date">发布文章时间：{{ getDate(articleDetail.pubdate) }}</p>
      </main>
    </section>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import moment from 'moment';

let h = 0;

export default {
  name: 'ArticleDetail',
  data() {
    return {
      headerInfoVisible: false,
    };
  },
  computed: {
    ...mapState('article', [
      'articleDetail',
    ]),
    ...mapState('comment', [
      'articleCommentList',
    ]),
  },
  methods: {
    ...mapActions('article', [
      'updateArticleDetail',
    ]),
    ...mapActions('comment', [
      'updateArticleCommentList',
    ]),
    getDate(timestamp) {
      return moment(timestamp).format('YYYY年MM月DD日');
    },
    onScroll() {
      this.headerInfoVisible = this.$refs.section.scrollTop > h;
    },
  },
  async created() {
    const { id } = this.$route.params;
    this.updateArticleCommentList(id);
    // 等待请求完成
    await this.updateArticleDetail(id);
    // 等待数据+DOM更新完成
    this.$nextTick(() => {
      const { clientHeight, offsetTop } = this.$refs.header;
      h = clientHeight + offsetTop - 46;
    });
  },
}
</script>

<style src="highlight.js/styles/atom-one-dark.css"></style>
<style lang="less" scoped>
@import url("@/assets/styles/common.less");

.container {
  background: #aaa;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .avatar-mini {
    .avatar(10px);
  }

  span {
    margin-left: 8px;
    font-weight: 600;
  }

  .follow-mini {
    color: #fc662c;

    &::before {
      content: '';
      display: inline-block;
      height: 10px;
      width: 1px;
      background: #aaa;
      margin-right: 8px;
    }
  }
}
section {
  flex: 1;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 16px;
  overflow: auto;

  header {
    border-bottom: 1px solid #f5f5f5;

    h2 {
      font-weight: normal;
    }

    .time-wrapper {

      span {
        display: inline-block;
        font-size: 12px;
        color: #666;
        line-height: 1em;
        border-right: 1px solid #666;
        padding-right: 8px;
        margin-right: 8px;

        &:last-child {
          border: none;
        }
      }
    }

    .author-info {
      display: flex;
      width: 100%;
      align-items: center;
      margin: 16px 0;

      .avatar {
        .avatar(18.5px);
      }

      .name {
        flex: 1;
        font-size: 18px;
        margin: 0 16px;
      }

      .follow {
        padding-left: 16px;
        padding-right: 16px;
      }
    }
  }

  main {
    .pub-date {
      text-align: right;
      color: #aaa;
      font-size: 14px;
    }
  }
}

</style>
